musify

Who is this for?

If you're a musician, it means that you can display chords on a web-page without having to remember lots of codes to format them properly.

Also, if you make tutorials on the Internet, it can lessen the use of images, making your tutorial more accessible. It's handy for short snippets or chord transcriptions, too.

musify ought to be able to do most things: a totally biased but good example is on my terse harmony guide, which uses the PHP version.

A more random example; take the chord notation of Steve Coleman's Games. Although it's on the Internet for educational use, it cannot be accessed by everyone who uses the Internet, since it's an image. musify widens the scope a bit. Here are the chords to the first eight bars of the song: all minor chords are shown with a minus sign.

44 C E⁷⁄G♯ | A- B | B♭- | G♭^add♭9 | F- | E | A^add♭9 | A♭^{no 3rd}^{(♭9, ♯11)}

Here is a screenshot of this page in W3M: screenshot of this section in W3M

Anyone using a text browser is now able to read the chords of the piece, even if they cannot access the image of the score.

JavaScript set-up

The easiest way to set-up your web-pages for musify to drop in the JavaScript to your pages.

Download the archive and extract musify.js and musify.css; then upload them to your web server.

Then in the pages where you want to musify, put a script line at the end of your HTML, before the </body> tag. We then add the musify class to an element to have it display properly.

<!DOCTYPE html>
<html lang="en">
<head>
<title>example page</title>
</head>
<body>
<p>here's an example of a chord with a redundant extension: 
<span class="musify">G[[maj7]](($5, #11))</span>
</p> 
<script type="text/javascript" src="musify.js"></script>
</body>
</html>

That's it! As long as your user has JavaScript enabled they can read your notation!

PHP set-up

Download the archive and extract musify.php and musify.css; then upload them to your web server.

Then include musify.php in a PHP block:

<?php
include 'musify.php';
?>

Then link to musify.css in your (X)HTML: either add this line to the <head> of your document

<link href="musify.css" rel="stylesheet" type="text/css" />

or, at the beginning of your existing stylesheet, add

@import url('musify.css')

You can then echo the musify function.

<p>here's an example of a chord with a redundant extension: 
<?php echo musify ('G[[maj7]](($5, #11))'); ?>
</p>

And you're set!

WordPress integration

To use musify in your WordPress installation, you will first need to install the Shortcode Exec PHP plugin.

Once the plugin is installed, a menu option for Shortcode Exec PHP will appear in the Super Admin menu.

Select it and make a new item in the new window that opens.

Open musify.php into a text editor (like Notepad, vi etc.) and find these two lines of code:

// $test = $atts['text'];
// echo musify($test);

Remove the double slashes at the beginning of the lines;

then copy the entire contents of the file, and paste the text into the Shortcode window.

Shortcode Exec window with musify.php text added

Then select Save and name the code. You can now use musify in your blog posts!

Here's the musify code
Enlarge

Here's the result! Success!
Enlarge

very basic use

musify[JS only]

Let's use a simple chord progression. If we wanted to move from a G major chord to a C major chord, we can simply write G | C; but if there are alterations then that is where musify comes into play.

First, let's sharpen the G: here, we just use a hash (#, called a pound sign in the United States and a number sign everywhere else) after the G.

HTML G# | C
PHP: <?php echo musify('G# | C');?>

[JS only] G# | C

To flatten a note we can use a dollar sign ($), the English pound sign (£), or the general currency sign (¤).

HTML: G£ | C
PHP: <?php echo musify('G£ | C');?>

[JS only] G£ | C

For a natural we use a question mark (?).

HTML: G? | C
PHP: <?php echo musify('G? | C');?>

[JS only] G? | C

To get a line break, tap in two exclamation marks (!!).

HTML: G!!C
PHP: <?php echo musify('G!!C');?>

[JS only] G !! C

Extensions and other qualities

Now, we can add superscripted extensions simply by enclosing them in double square brackets: so for the dominant seventh

Here's what you'd type in HTML: G[[7]] | C.
The PHP looks like this: <?php echo musify('G[[7]] | C');?>

[JS only] G[[7]] | C

You can also use double square brackets if you prefer the add method of notating:

Type G£[[7]] | C[[add9, 13]]

[JS only] G£[[7]] | C[[add9, 13]]

But those who like brackets around extensions can use double curved brackets instead.

Type G£[[7]] | C((9, 13))

[JS only] G£[[7]] | C((9, 13))

You can have these elements sat side-by-side:

Type G£[[7]] | C[[maj7]]((9, £13))

[JS only] G£[[7]] | C[[maj7]]((9, £13))

Sticking with our simple progression, let's add a major seventh to the final C. Depending on how you like to notate things, you can do this in different ways.

written out: [[maj7]]

Type G£[[7]] | C[[maj7]]

[JS only] G£[[7]] | C[[maj7]]

Using the triangle: ^ but beware

Type G£[[7]] | C^

[JS only] G£[[7]] | C^

The triangle is ambiguous: it could either mean the triad or the major seventh. There is no real consensus for this. If the voicing of the chord is important, check which one is meant!

We use an underscore for the diminished symbol:

Type G£_ | C

[JS only] G£_ | C

and a tilde (~) for the half-diminished symbol:

Type G£~ | C

[JS only] G£~ | C

musify ignores anything it does not understand, so you can use whatever you like for the minor, augmented or suspended chords.

Type G£m | Caug

[JS only] G£m | Caug

Type G£- | C+

[JS only] G£- | C+

slashes and figures and time

musify gives you a way of displaying figured notation too. It isn't perfect, but you might find it neater and closer aligned to normal script. Back to our progression again:

figured notation

You can state the voicing using this notation: {{outer interval@inner interval}}

Type G{{5@3}} | C{{6@4}}

[JS only] G{{5@3}} | C{{6@4}}

For Roman figured, just replace the notes with Roman numerals. Note that musify leaves anything it does not understand, so you can enter text within the paragraph too.

Type in C[maj.]: V{{5@3}} | I{{6@4}}

[JS only] in C[maj.]: V{{5@3}} | I{{6@4}}

Sometimes the figure is sub-scripted: this is possible too. the method: [-stuff you want to sub-script-].

Type in C[maj.]: VII[-{{6@$5}}-] | I[-{{6@4}}-]

[JS only] in C[maj.]: VII[-{{6@$5}}-] | I[-{{6@4}}-]

slash chords

This is similar but with one change: {{top bit//bottom bit}}

Type {{7@4}} {{G//d£}} | {{12@8}} {{C//c#}}

to get: 74 G⁄d♭ | 128 C⁄c♯

[JS only] {{7@4}} {{G//d£}} | {{12@8}} {{C//c#}}

time

The short-hand above also gives you a rudimentary way of denoting a time signature:

Type {{7@4}} G | {{12@8}} C

[JS only] {{7@4}} G | {{12@8}} C

However, if you are writing for text browsers it is better to use a visible slash so that the numbers are separated.

Type {{7//4}} G | {{12//8}} C

[JS only] {{7//4}} G | {{12//8}} C

If the numbers don't align properly in the font you choose, it is likely that you will need to make small changes to the margin-right property for the timden class in musify.css.

ties and other symbols

musify can produce two ties, and an ellipsis to simulate a dotted tie. This allows you to represent macro analysis in a functional way.

A overhead tie: ==

Type G==C

[JS only] G==C

A under-hanging tie: --

Type G--C

[JS only] G--C

A dotted tie: ...

Type G...C

[JS only] G...C

For more information on macro analysis please visit the MACRO web-site.

Set theory

In set theory, wide-angle brackets are sometimes used for ordered pitch classes. You can get these by using <|...|>

Type <|0, 3, 2|>

[JS only] <|0, 3, 2|>

Usage considerations

For educational use, the PHP form is better as it relies less on the user's browser capabilities. Most non-graphical browsers and older browsers may not be able to handle JavaScript correctly. But of course your web server must support PHP!

For local versions, the JavaScript form should be fine. If you want to use both (as the documentation on this site does), you can use a noscript block to hold the PHP version:

<span class="musify">G[[7]] | C</span>
<noscript><p><?php echo musify('G[[7]] | C');?></p></noscript>

and in your stylesheet, set the musify class not to display.

span.musify {display: none;}

The musify.js file sets the display property of .musify to inline-block, so it will display the span if JavaScript is enabled, and hide it not.

Because musify is made for web pages, you can modify the font used to display your music. There are a few ways of doing this: but in my opinion, the easiest way is this:

make your web page as normal, but if you're using PHP, ensure that you've wrapped the PHP block in an element with a musify class:
```
<?php echo musify('G[[7]] | C');?>
```
then in the stylesheet for your page, add a musify class and set your fonts and sizes.
```
.musify { font-family: "Century Schoolbook L", serif; font-size: 1.5em; }
```

Depending on the font you use, the time signatures/figured notation may be mis-aligned. You can tweak margin-right property for the timden class in musify.css if it doesn't look quite right. Make the negative number larger to shift the denominator to the left.

If you need the chords aligned, you could use a table and enter the chords in each cell: although technically this would not be correct for most forms of Western music since they are based on lines and not grids. Another idea is to use a mono-spaced font, since each character has exactly the same width.

The correct display of characters depends on the font you use. For best results use a Unicode font.

musify codes
Type this	To get this	Explanation
d#	d♯	sharp
f£ \| f$ \| f¤	f♭ \| f♭ \| f♭	flat
f?	f♮	natural
E!!A	E A	line break
G_	G^°	diminished
C~	C^∅	half-diminished
D#[[maj7]]	D♯^maj7	super-scripting
B£((#9))	B♭^(♯9)	super-scripting with brackets
B^	B^Δ	triangle symbol
C * 3	C × 3	multiplication symbol
{{E//d£}}	E⁄d♭	slash chords
{{47@16}}	4716	time signatures
ii[-{{6@4}}-]	ii₆₄	sub-scripting elements
E--A[[7]]	E‿A⁷	inverted tie
E==A[[7]]	E⁀A⁷	tie
E...A[[7]]	E…A⁷	dotted tie/ellipsis
<\|2, 1, 5\|>	⟨2, 1, 5⟩	ordered pitch sequences

Quick mark-up for chords

musify aims to give people who write music a way of presenting chordal notation on the Internet.

It can display jazz chord symbols, simple figured bass, functional harmonic analysis and basic macro analysis symbols.

musify is free for all.

It does things like this:

44 Bm^(♭5/♮5) E⁷^(♯11) | Am⁷ D+^(♭9) | Cm¹¹ | B♭^∅⁽¹¹⁾ | B+^maj7⁄E^(♭5)

German 6^th, e.g. in ♭VI in C

in D^min.: II₆₃ V_6♯4 I

a^°‿D…D⁺‿g

RI₅ (⟨3 , 5, 7⟩) = ⟨1, 3, 5⟩